<template>
     <div class="mybox-departments">
     <div class="departments-card"  >
      <el-carousel :interval="2000" type="card" height="550px" trigger="click" >
    <el-carousel-item v-for="(item, index) in imgList" :key="index">
      <h2 style="letter-spacing:20px">{{ item.title}}</h2>
         <img :src="item.imgsrc" alt="" style="width:100%;height:100%">
    </el-carousel-item>
  </el-carousel>
     </div>
    </div>
</template>

<script>



export default {
    name: 'departments',
    comName: '科室',
     comSort: 3,

     data() {
         return {
              imgList:[
              {key:'1',imgsrc: require('../../../assets/images/department/1.jpg'),title:'口腔科'},
              {key:'2',imgsrc: require('../../../assets/images/department/2.jpg'),title:'眼科'},
              {key:'3',imgsrc: require('../../../assets/images/department/3.jpg'),title:'妇产科'},
              {key:'4',imgsrc: require('../../../assets/images/department/4.jpg'),title:'脑科'},
              {key:'5',imgsrc: require('../../../assets/images/department/5.jpg'),title:'心脏科'},
              {key:'6',imgsrc: require('../../../assets/images/department/6.jpg'),title:'骨科'},
              {key:'7',imgsrc: require('../../../assets/images/department/7.jpg'),title:'儿科'},
              {key:'8',imgsrc: require('../../../assets/images/department/8.jpg'),title:'内科'},
              {key:'9',imgsrc: require('../../../assets/images/department/9.jpg'),title:'外科'},
            ],
         };
     },

     mounted(){
    
     },

     methods:{
     }

}
</script>

<style lang="scss" scoped>
.mybox-departments{
    width: 100%;
    height: 100%;
        display: flex;
       margin: 0 auto;
       margin-top: 5px;


       .departments-card{
           margin: 0 auto;
           height: 100%;
             width: 90%;
             text-align: center;

}
}
</style>
